<template>
    <n-space vertical>
    <n-form
      ref="formRef"
      :model="model"
      label-placement="left"
      :label-width="160"
      class="setting-cont"
    >
      <n-form-item label="分配账号">
        <n-input v-model:value="model.username" 
        placeholder="请输入账号" />
      </n-form-item>
      <n-form-item label="默认密码" >
        <n-input v-model:value="model.password" 
        type="password" placeholder="密码" />
      </n-form-item>
      <n-form-item label="关联角色" >
        <n-select
          v-model:value="model.roleId"
          placeholder="请选择角色"
          :options=" roleList"
           label-field="roleName"
           value-field="_id"
        />
      </n-form-item>
      <n-form-item label=" " >
        <n-button type="primary" size="medium" 
        block @click="handleRegister">
            确认注册
        </n-button>
      </n-form-item>
    </n-form>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'
import { roleGetApi, userRegisterApi } from '../../api/user';
  const roleList = ref([]);
  roleGetApi().then((res)=>{
    roleList.value = res.data.data
  })
const model =ref({
  username:'',
  password:'',
  roleId:'',
})
const formRef = ref()
//获取用户信息
const handleRegister = async()=>{
  await userRegisterApi(model.value)
}

</script>

<style lang="scss" scoped>
.setting-cont{
  padding-right: 140px;
}
</style>